import React, { FC, memo, useEffect, useState } from 'react';
import { history, useLocation } from 'umi';

import GroupHeader from '@/page-compoennt/group/GroupHeader';
import useFetchMonitorInfoSwr from '@/hooks/swr/useFetchMonitorInfoSwr';
import PageInnerHeader from '@/components/page-inner-header/PageInnerHeader';

interface IPageProps {
  mid: number;
  child: any;
}

const GroupIndex: FC<IPageProps> = (props) => {
  const { mid } = props;
  const [headerActive, setHeaderActive] = useState('');
  const { data: monitorInfoPageModel } = useFetchMonitorInfoSwr(mid);

  const location = useLocation();
  useEffect(() => {
    if (location.pathname.indexOf('main') > -1) {
      setHeaderActive('main');
    }
    if (location.pathname.indexOf('card') > -1) {
      setHeaderActive('card');
    }
    if (location.pathname.indexOf('miner') > -1) {
      setHeaderActive('miner');
    }
    if (location.pathname.indexOf('grouping') > -1) {
      setHeaderActive('grouping');
    }
  }, [location.pathname]);

  const onMenuChange = (value: string) => {
    if (!value) {
      value = 'main';
    }
    history.push(`/group/${mid}/${value}`);
  };

  if (!monitorInfoPageModel) {
    return null;
  }

  return (
    <div>
      <PageInnerHeader
        onChange={onMenuChange}
        title={monitorInfoPageModel.info.name}
        headerActive={headerActive}
        options={[
          { text: '概况', value: 'main' },
          { text: '分组', value: 'grouping' },
          { text: '矿机', value: 'miner' },
          { text: '显卡', value: 'card' },
        ]}
      />

      {React.Children.map(props.child, (child) => {
        return React.cloneElement(child, {
          mid,
          monitorInfo: monitorInfoPageModel,
        });
      })}
    </div>
  );
};

export default memo(GroupIndex);
